<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片自动播放</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 1000px;
            height: 500px;
            margin: auto;
            background-color: pink;
        }

        img {
            width: 1000px;
            height: 500px;
            display: none;
        }

        .active {
            display: block;
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="1.jpg" class="active">
        <img src="2.jpg">
        <img src="3.jpg">
    </div>
    <script>
        index = 1;
        var f = function() {
            var imgs = document.querySelectorAll("img");
            for (var i = 0; i < imgs.length; i++)
                if (imgs[i].getAttribute("class"))
                    imgs[i].className = '';
            console.log(index);
            imgs[index].className = 'active';
            index++;
            if (index == imgs.length) index = 0;

        }
        var timer = setInterval(f, 1000);
    </script>
    <!-- <div class="nav">
        <img id="img" src="1.jpg" alt="">
    </div>
    <script>
        var img = document.getElementById("img");
        var arr = ["1.jpg", "2.jpg", "3.jpg"];
        var i = 1;
        setInterval((function () {
            img.src = arr[i];
            i++;
            if (i > arr.length) {
                i = 0;
                img.src = arr[i];
                i++;
            }
        }), 1000);
    </script> -->
</body>

</html>